<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">
<title>Ahorro</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<link type="text/css" href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
<!-- end -->

<!--  Core jQuery  -->
<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
<!--  Donut -->
<script type="text/javascript" src="scripts/jquery.donutchart.js"></script>
<!--[if lte IE 8]>
    <script type="text/javascript" src="scripts/excanvas.compiled.js"></script>
<![endif]-->
<!--  jQuery UI-->
<script type="text/javascript" src="scripts/ui/jquery-ui-1.8.21.custom.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.core.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.widget.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.button.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.sortable.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.progressbar.js"></script>


</head>
<body>
	
	<ul>
	<li> 
	<div>
		<!-- grupo -->
		<h2 style="border-bottom:1px solid #ddd;">Iconos</h2>
		<div style="margin-left:2em">			
		<p>Aqui definiriamos un template xslt, para definir las iconos</p>	
		<h3>Imagen Comun</h3>
		<p>Sobre esta imagen en principio se van a especificar todos los iconos graficos de la aplicacion.</p>
		
		<div>
		
		<img src="./css/images/iconos.png">
		</div>
<br/><br/>	
		
		<!-- elemento-->
		<h4>caja_texto_tipo_1</h4>
		<h3>propiedades</h3>
		<table>
		<tr><td>Comunes</td></tr>
		</table><br/><br/>	
		<div class="caja_texto_tipo_1">Eam aeterno reprehendunt ex, iusto molestie te eum. Mea congue quodsi vocent at. Nam ea aliquip detracto adipiscing.</div>
		<div style="clear:both"></div>
		<!-- elemento-->
		<h4>caja_texto_tipo_2</h4>				
		<h3>propiedades</h3>		
		<table>
		<tr><td>font-family:Verdana;</td></tr>
		<tr><td>font-size:14px;</td></tr>
		<tr><td>line-height:30px;</td></tr>
		</table><br/><br/>	
		<div class="caja_texto_tipo_2">Eam aeterno reprehendunt ex, iusto molestie te eum. Mea congue quodsi vocent at. Nam ea aliquip detracto adipiscing.Eam aeterno reprehendunt ex, iusto molestie te eum. Mea congue quodsi vocent at. Nam ea aliquip detracto adipiscing.Eam aeterno reprehendunt ex, iusto molestie te eum. Mea congue quodsi vocent at. Nam ea aliquip detracto adipiscing.</div>
		<div style="clear:both"></div>

		<!-- elemento-->
		<h4>caja_texto_contenido_tipo_1</h4>
		<h3>propiedades</h3>
		<table>
		<tr><td>width:695px;</td></tr>
		</table><br/><br/>			
		<div class="caja_texto_contenido_tipo_1">Eam aeterno reprehendunt ex, iusto molestie te eum. </div>
		<div style="clear:both"></div>
		
		<!-- elemento-->		
		<h4>caja_alerta_tipo_1</h4>
		<h3>propiedades</h3>
		<table>
		<tr><td>padding:30px 40px 30px 40px;</td></tr>
		<tr><td>background-color:#fff;</td></tr>
		<tr><td>border:1px solid #c70000;</td></tr>
		<tr><td>width:695px;</td></tr>
		<tr><td>float:left;</td></tr>
		</table><br/><br/>	
		<div class="caja_alerta_tipo_1">Eam aeterno reprehendunt ex, iusto molestie te eum. </div>
		<div style="clear:both"></div>		
		
		<!-- elemento-->		
		<h4>caja_alerta_tipo_2</h4>
		<h3>propiedades</h3>
		<table>
		<tr><td>border:1px solid #287b9e;</td></tr>
		</table><br/><br/>			
		<div class="caja_alerta_tipo_2">Eam aeterno reprehendunt ex, iusto molestie te eum. Eam aeterno reprehendunt ex, iusto molestie te eum. </div>
		<div style="clear:both"></div>	
		</div>

		<!-- grupo -->
		<h2 style="border-bottom:1px solid #ddd;">Input Radio</h2>
		<div style="margin-left:2em">
		
		
		<p>Cajas definidas para INPUT:RADIO</p>
		<h3>propiedades Comunes</h3>		
		<table>
		<tr><td>padding:15px;</td></tr>
		<tr><td>background-color:#f8f6f7;</td></tr>
		<tr><td>border-top:1px solid #ccc;</td></tr>
		<tr><td>width:180px;</td></tr>
		<tr><td>height:78px;</td></tr>
		<tr><td>float:left;</td></tr>
		<tr><td>overflow:hidden;</td></tr>
		</table><br/><br/>	
		

		<!-- elemento-->		
		<h4>caja_radio_tipo_1</h4>
		<h3>propiedades</h3>
		<table>
		<tr><td>Comunes</td></tr>
		</table><br/><br/>			
		<div class="caja_radio_tipo_1">Eam aeterno reprehendunt ex, iusto molestie te eum. Eam aeterno reprehendunt ex, iusto molestie te eum. </div>
		<div style="clear:both"></div>	

		<!-- elemento-->		
		<h4>caja_radio_tipo_2</h4>
		<h3>propiedades</h3>
		<table>
		<tr><td>background-image:url("./images/ui-bg_highlight-soft_100_eeeeee_1x100.png");</td></tr>
		</table><br/><br/>			
		<div class="caja_radio_tipo_2">Eam aeterno reprehendunt ex, iusto molestie te eum. Eam aeterno reprehendunt ex, iusto molestie te eum. </div>
		<div style="clear:both"></div>	
		</div>
		
		<h2 style="border-bottom:1px solid #ddd;">Textos</h2>
		<div style="margin-left:2em">
		<!-- grupo -->
		<p>Textos de titulos y contenido</p>
		<div style="background-color:#ccc;width:50%;height:5em;font-size:14px;padding:2em;">		
			La fuente es un ejemplo nos faltaria que Bankinter nos de la propia del funcional.
		</div>
		<h3 style="width:100%;border-bottom:1px dashed #ccc;">Titulos</h3>
		<h3>propiedades Comunes</h3>
		<table>
		<tr><td>font-size:30px;</td></tr>
		<tr><td>font-weight:bold;</td></tr>
		</table><br/><br/>	


		<!-- elemento-->
		<h4>texto_h1</h4>		
		<h3>propiedades</h3>
		<table>
		<tr><td>font-size:30px;</td></tr>
		<tr><td>font-weight:bold;</td></tr>
		</table><br/><br/>

		<h1 class="texto_h1"> Lorem ipsum dolor sit amet</h1>

		<h4>texto_h2</h4>		
		<h3>propiedades</h3>
		<table>
		<tr><td>font-size:22px;</td></tr>
		<tr><td>font-weight:bold;</td></tr>
		</table><br/><br/>

		<h1 class="texto_h2"> Lorem ipsum dolor sit amet</h1>
		
		<h4>texto_h3</h4>		
		<h3>propiedades</h3>
		<table>
		<tr><td>font-size:22px;</td></tr>
		<tr><td>font-weight:bold;</td></tr>
		</table><br/><br/>

		<h1 class="texto_h3"> Lorem ipsum dolor sit amet</h1>
		<h4>texto_h4</h4>		
		<h3>propiedades</h3>
		<table>
		<tr><td>font-size:22px;</td></tr>
		<tr><td>font-weight:bold;</td></tr>
		</table>

		<h1 class="texto_h4"> Lorem ipsum dolor sit amet</h1>		
		</div>
			
		
		<!--  propiedades en com&uacute;n -->		
		<h3 style="width:100%;border-bottom:1px dashed #ccc;">Contenido</h3>		
		<h4>propiedades en com&uacute;n</h4>
		<table>
		<tr><td>font-family: Verdana;</td></tr>
		<tr><td>color: #000000;</td></tr>
		<tr><td>font-weight: normal;</td></tr>
		</table><br/><br/>	
		<!--  elemento -->
		<h4>texto_resumen</h4>		
		<h3>propiedades</h3>
		<table>
		<tr><td>font-size:18px;</td></tr>		
		</table><br/><br/>		
		<p class="texto_resumen">Lorem ipsum dolor sit amet</p>
		<!--  elemento -->
		<h4>texto_contenido</h4>		
		<h3>propiedades</h3>
		<table>
		<tr><td>font-size:14px;</td></tr>		
		</table><br/><br/>		
		<p class="texto_contenido">Lorem ipsum dolor sit amet</p>
		<!--  elemento -->
		<h4>texto_recomendaciones</h4>		
		<h3>propiedades</h3>
		<table>
		<tr><td>font-size:12px;</td></tr>		
		</table><br/><br/>		
		<p class="texto_recomendaciones">Lorem ipsum dolor sit amet</p>
		<!--  elemento -->
		<h4>texto_titulo_alertas</h4>		
		<h3>propiedades</h3>
		<table>
		<tr><td>font-size:11px;</td></tr>		
		<tr><td>font-weight:bold;</td></tr>		
		</table><br/><br/>		
		<p class="texto_titulo_alertas">Lorem ipsum dolor sit amet</p>	
	</div>
	
	
	
	<div class="button-icono-gris button-editar-modificar">
		
	</div>
	<div class="button-icono tipo-editar-modificar">
		
	</div>	
	<div class="button-icono tipo-cerrar">

	</div>
	<div class="button-icono tipo-condiciones">

	</div>

	<div class="button-meta flecha-abajo">

	</div>
	<div class="button-meta flecha-arriba">

	</div>

	<div class="button-signo signo-mas">

	</div>
	<div class="button-idea idea-bombilla">

	</div>
	<div class="button-alerta alerta-excl-roja">

	</div>
	<div class="button-alerta alerta-excl-azul">

	</div>
	<div class="button-alerta alerta-check-verde">

	</div>


	
</body>
</html>